<template>
	<view class="check">
		<view class="check-top" :style="tabberStyle">
			<view class="check-top-search ff-bg-blue ff-padding-15 ff-relative">
				<u-search v-model="searchContent" :input-style="inpStyle" :height="80" :show-action="false"
					@change="searchNameChange" :clearabled="true" placeholder="请输入" input-align="center"
					:action-style="actionStyle">
				</u-search>
				<view class="check-top-select">
					<view>
						<u-dropdown :height="32">
							<u-dropdown-item v-model="searchCurrent" @change="searchTypeChange" :title="searchTitle"
								:options="searchList"></u-dropdown-item>
						</u-dropdown>
					</view>
				</view>
				<view class="check-top-tabber">
					<view
						class="ff-border-radius-10 ff-font-weight-600 ff-font-15 ff-bg-fff ff-padding-5 ff-flex ff-flex-between ff-align-items-1">
						<view class="check-top-tabber-left" @click="typeTabClick(1)">
							<view v-if="typeState1" class="ff-flex ff-flex-center ff-padding-14 ff-align-items-1">
								<image
									src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/check_1.png"
									mode=""></image>
								<text>发起抽查</text>
							</view>
							<view v-else class="ff-flex activeTab ff-flex-center ff-padding-14 ff-align-items-1">
								<image
									src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/check_1_select.png"
									mode=""></image>
								<text class="ff-color-blue">发起抽查</text>
							</view>
						</view>
						<view class="check-top-tabber-right" @click="typeTabClick(2)">
							<view v-if="typeState2" class="ff-flex ff-flex-center ff-padding-14 ff-align-items-1">
								<image
									src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/check_2.png"
									mode=""></image>
								<text>抽查记录</text>
							</view>
							<view v-else class="ff-flex activeTab ff-flex-center ff-padding-14 ff-align-items-1">
								<image
									src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/check_2_select.png"
									mode=""></image>
								<text class="ff-color-blue">抽查记录</text>
							</view>
						</view>
					</view>
					<image v-if="!typeState1" class="left-icon"
						src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/details-san.png"
						mode="">
					</image>
					<image v-if="!typeState2" class="right-icon"
						src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/details-san.png"
						mode="">
					</image>
				</view>

			</view>
			<view class="check-content-info ff-relative ff-bg-f5">
				<view
					class="ff-flex ff-margin-left-20 ff-margin-right-20 ff-margin-top-22 ff-padding-4 ff-align-items-1 ff-flex-between">
					<view>
						<view @click.stop="practicingNumClick" v-if="!typeState1">
							正在执业人数：<text class="ff-color-blue ff-margin-right-3">{{total}}</text><u-icon
								name="info-circle" color="#FE932B" size="28"></u-icon>
						</view>
						<view @click.stop="checkNumClick" v-else class="ff-margin-top-11">
							近一个月抽查次数：<text class="ff-color-blue ff-margin-right-3">{{total}}</text><u-icon
								name="info-circle" color="#FE932B" size="28"></u-icon>
						</view>
					</view>
					<view>
						<view v-if="typeState2" class="check-content-info-select">
							<u-dropdown>
								<u-dropdown-item v-model="params.order" @change="typeTimeChange"
									:title="typeTimeTabTitle" :options="typeTimeTabList"></u-dropdown-item>
							</u-dropdown>
						</view>
						<view v-else @click="refreshClick"
							class="ff-flex ff-align-items-1 ff-margin-top-11 ff-color-blue">
							<image class="refreshIcon ff-margin-right-3"
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/refresh1.png"
								mode=""></image>
							<view>刷新</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="!typeState2" class="ff-bg-fff stateMore ff-margin-top-10">
				<u-dropdown>
					<u-dropdown-item v-model="params.checkStatus" title="抽查状态" @change="checkStatusChange"
						:options="checkStateList"></u-dropdown-item>
					<u-dropdown-item v-model="params.cancelStatus" title="作废情况" @change="cancelStatusChange"
						:options="invalidationStatus"></u-dropdown-item>
					<u-dropdown-item v-model="params.evidenceStatus" title="证明材料" @change="evidenceStatusChange"
						:options="evidenceStatus"></u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		<view class="check-content ff-margin-top-20" :class="[!typeState1?'activeTop1':'activeTop2']">
			<view class="check-content-chunk">
				<view v-if="checkPageList.length > 0">
					<view v-for="(item, index) of checkPageList" :key="index" @click.stop="checkDetailsClick(item)"
						class="unit-content-box ff-relative ff-margin-12 ff-padding-12 ff-bg-fff ff-border-radius-10">
						<view class="ff-relative">
							<view
								class="ff-font-16 ff-ellipsis-1 ff-font-weight-600 ff-margin-bottom-8 ff-line-height-1-3">
								{{item.projectName}}
							</view>
							<image class="lineIcon"
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/check-line.png"
								mode=""></image>
						</view>
						<view class="stateList ff-margin-bottom-8" v-if="!typeState2">
							<view v-if="item.checkStatus == 0">
								<view class="checkState1">未发起</view>
							</view>
							<view v-if="item.checkStatus == 1" class="ff-flex ff-align-items-1">
								<view class="checkState2">抽查中</view>
							</view>
							<view v-if="item.checkStatus == 2" class="ff-flex ff-align-items-1">
								<view class="checkState3">已通过抽查</view>
							</view>
							<view v-if="item.checkStatus == 3" class=" ff-align-items-1 ff-flex">
								<view class="checkState4">未通过抽查</view>
								<view class="ff-margin-left-15">
									<view v-if="item.evidenceStatus == 1" class="checkState4_3">证明材料：未提交</view>
									<view v-if="item.evidenceStatus == 2" class="checkState4_1">证明材料：未读</view>
									<view v-if="item.evidenceStatus == 3" class="checkState4_2">证明材料：已读</view>
								</view>
							</view>
						</view>
						<view class="ff-color-5C5F65">
							<view class="ff-margin-bottom-6 ff-flex ff-align-items-1">
								<view>执业人：{{item.username}}</view>
								<view v-if="!typeState1" class="checkUnm">已被抽查{{item.checkNum}}次</view>
							</view>
							<view v-if="!typeState1" class="ff-margin-bottom-8">已执业时长：{{item.duration}}</view>
							<view v-if="!typeState2" class="ff-margin-bottom-8">本次执业时长：{{item.duration}}</view>
							<view>技术服务机构：{{item.orgName}}</view>
							<view class="ff-margin-top-8" v-if="!typeState2">发起抽查时间：{{item.checkTime}}</view>
						</view>
						<view>
							<view v-if="!typeState1" class="check-but">去抽查</view>
							<view v-if="!typeState2">
								<image v-if="item.cancelStatus == 2" class="cancelIcon"
									src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/material3_icon.png"
									mode=""></image>
							</view>
						</view>
					</view>
					<u-divider v-if="noData" border-color="#909399" height="120" margin-bottom="30" color="#909399"
						bg-color="#f5f5f5">没有更多了</u-divider>
				</view>
				<f-noData v-else topStyle="30%"></f-noData>
			</view>
		</view>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchList: [{
						label: '项目名称',
						value: 1
					},
					{
						label: '服务机构',
						value: 2
					}
				],
				searchTitle: '项目名称',
				searchCurrent: 1, // 搜索tab切换
				typeState1: false, // 抽查和记录切换
				typeState2: true, // 抽查和记录切换
				inpStyle: {
					'padding-right': '195rpx'
				},
				typeTimeTabList: [{
						label: '最新执业',
						value: 1
					},
					{
						label: '最久执业',
						value: 2
					}
				],
				typeTimeTabTitle: '最新执业',
				searchContent: '', // 搜索的内容
				// 抽查状态系列
				checkStateList: [{
						label: '默认排序',
						value: null
					},
					{
						label: '未抽查',
						value: 0
					},
					{
						label: '抽查中',
						value: 1
					},
					{
						label: '已通过抽查',
						value: 2
					},
					{
						label: '未通过抽查',
						value: 3
					},
				],
				// 作废情况状态系列
				invalidationStatus: [{
						label: '默认排序',
						value: null
					},
					{
						label: '未作废',
						value: 1
					},
					{
						label: '已作废',
						value: 2
					}
				],
				// 证明材料状态系列
				evidenceStatus: [{
						label: '默认排序',
						value: null
					},
					{
						label: '未提交',
						value: 1
					},
					{
						label: '未读',
						value: 2
					},
					{
						label: '已读',
						value: 3
					}
				],
				params: {
					projectName: '', // 项目名称
					orgName: '', // 技术服务机构名称
					username: '', // 执业人
					order: 1, // 执业时间排序（按执业时长） 1 正序 2 倒序
					size: 25, // 数量
					current: 1, // 页码
					checkStatus: null, // 抽查状态 0.未抽查 1.抽查中 2.已通过抽查 3.未通过抽查
					cancelStatus: null, // 作废情况 1.未作废 2.已作废
					evidenceStatus: null, // 证明材料状态 1.未提交2.未读3.已读
				},
				checkPageList: [], // 抽查记录列表or发起抽查列表
				noData: false, // 没有更多了
				total: '', // 条数
			}
		},
		onLoad() {},
		computed: {
			tabberStyle() {
				return `top:${this.customBar}px;`;
			}
		},
		methods: {
			// 搜索type select切换
			searchTypeChange(e) {
				// console.log('搜索searchType select切换', e)
				this.params.searchType = e // 搜索type select切换的current
				if (e == 1) {
					this.searchTitle = '项目名称'
					this.params.projectName = this.searchContent
					this.params.orgName = ''
				} else if (e == 2) {
					this.searchTitle = '服务机构'
					this.params.orgName = this.searchContent
					this.params.projectName = ''
				} else {
					this.searchTitle = '执业人'
					this.params.username = this.searchContent
					this.params.orgName = ''
					this.params.projectName = ''
				}
				this.getCheckPageList(); // 获取抽查列表or记录
			},
			// 抽查or记录type tab切换
			typeTabClick(index) {
				// console.log(index, this.typeState1, this.typeState2)
				if (index == 1) {
					this.typeState1 = false
					this.typeState2 = true
					this.searchList = [{
							label: '项目名称',
							value: 1
						},
						{
							label: '服务机构',
							value: 2
						}
					]
				} else if (index == 2) {
					this.typeState1 = true
					this.typeState2 = false
					this.searchList = [{
							label: '项目名称',
							value: 1
						},
						{
							label: '服务机构',
							value: 2
						},
						{
							label: '执业人',
							value: 3
						}
					]
				}
				this.searchCurrent = 1
				this.searchTitle = '项目名称'
				this.searchContent = ''
				this.params.username = ''
				this.params.orgName = ''
				this.params.projectName = ''
				this.params.current = 1
				this.params.order = 1
				this.typeTimeTabTitle = '最新执业'
				this.params.checkStatus = null
				this.params.cancelStatus = null
				this.params.evidenceStatus = null
				this.getCheckPageList(); // 获取抽查列表or记录
			},
			// 时间type select切换
			typeTimeChange(e) {
				// console.log('搜索typeTimeTabTitle切换', e)
				this.params.order = e
				if (e == 1) {
					this.typeTimeTabTitle = '最新执业'
				} else {
					this.typeTimeTabTitle = '最久执业'
				}
				this.getCheckPageList(); // 获取抽查列表or记录
			},
			// 检查状态下拉选中
			checkStatusChange(e) {
				// console.log('检查状态', e, this.params.checkStatus)
				this.params.current = 1;
				this.getCheckPageList(); // 获取抽查列表or记录
			},
			// 作废状态下拉选中
			cancelStatusChange(e) {
				// console.log('作废状态下拉选中', e, this.params.cancelStatus)
				this.params.current = 1;
				this.getCheckPageList(); // 获取抽查列表or记录
			},
			// 证明材料状态下拉选中
			evidenceStatusChange(e) {
				// console.log('证明材料状态下拉选中', e, this.params.evidenceStatus)
				this.params.current = 1;
				this.getCheckPageList(); // 获取抽查列表or记录
			},
			// 执业人数弹窗
			practicingNumClick() {
				uni.showModal({
					title: '说明',
					content: '本处人数统计范围为非易燃易爆场所执业人员数量。',
					confirmColor: '#3178FF',
					confirmText: '好的',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定')
						}
					},
				})
			},
			// 近一个月抽查次数弹窗
			checkNumClick() {
				uni.showModal({
					title: '说明',
					content: '小程序端仅显示近一个月中，我已发起的抽查记录。如需查看更早的数据，请登录电脑端进行操作。',
					confirmColor: '#3178FF',
					showCancel: false,
					confirmText: '好的',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定')
						}
					},
				})
			},
			// 刷新
			async refreshClick() {
				const data = await this.$http.get({
					url: '/maintenanceRecordCheckSupervise/batchRefresh'
				})
				console.log('刷新抽查记录--', data)
				if (data.code == 200) {
					this.params.current = 1;
					this.getCheckPageList(); // 获取抽查列表or记录
				} else {
					uni.showModal({
						title: '温馨提示',
						content: data.msg,
						confirmColor: '#3178FF',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								// console.log('用户点击确定')
							}
						},
					})
				}
			},
			// onShow监听刷新
			showLoading() {
				this.params.current = 1;
				this.params.order = 1
				this.typeTimeTabTitle = '最新执业'
				this.params.checkStatus = null
				this.params.cancelStatus = null
				this.params.evidenceStatus = null
				this.getCheckPageList(); // 获取抽查列表or记录
			},
			// 上拉加载
			pullLoading() {
				if (!this.noData) {
					this.params.current++;
					this.getCheckPageList(); // 获取抽查列表or记录
				}
			},
			// 下拉刷新
			downLoading() {
				this.params.current = 1;
				this.params.order = 1
				this.typeTimeTabTitle = '最新执业'
				this.params.checkStatus = null
				this.params.cancelStatus = null
				this.params.evidenceStatus = null
				this.getCheckPageList(); // 获取抽查列表or记录
				setTimeout(() => {
					uni.stopPullDownRefresh(); // 停止刷新
				}, 100);
			},
			// 搜索项目名称
			searchNameChange() {
				// console.log('当前搜索的值----', this.searchContent)
				this.params.projectName = ''
				this.params.orgName = ''
				this.params.username = ''
				if (this.searchCurrent == 1) {
					this.params.projectName = this.searchContent
				} else if (this.searchCurrent == 2) {
					this.params.orgName = this.searchContent
				} else if (this.searchCurrent == 3) {
					this.params.username = this.searchContent
				}
				this.params.current = 1;
				this.getCheckPageList(); // 获取抽查列表or记录
			},
			// 获取抽查列表or记录
			async getCheckPageList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: this.typeState1 ? '/maintenanceRecordCheckSupervise/checkPage' :
						'/maintenanceRecordCheckSupervise/recordPage',
					data: this.params
				});
				// console.log('获取抽查列表or记录------', data);
				if (data.code == 200) {
					this.$refs.loading.closeLoading(); // 关闭loading动画
					const infoList = data.data.records;
					if (infoList.length == 0 && this.params.current == 1) {
						// console.log('首次加载没数据');
						this.noData = false;
						this.checkPageList = [];
					} else if (infoList.length < 5 && this.params.current == 1) {
						this.noData = true;
						this.checkPageList = infoList;
					} else if (infoList.length !== 0 && this.params.current == 1) {
						// console.log('首次加载有数据');
						this.noData = false;
						this.checkPageList = infoList;
					} else if (infoList.length !== 0 && this.params.current > 1) {
						// console.log('上拉加载更多数据');
						this.noData = false;
						this.checkPageList = this.checkPageList.concat(infoList);
					} else if (infoList.length == 0 && this.params.current > 1) {
						// console.log('上拉加载没有更多数据了');
						this.noData = true;
					}
					this.total = data.data.total
				} else {
					this.$refs.loading.closeLoading(); // 关闭loading动画
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
			},
			// 点击进入详情
			checkDetailsClick(item) {
				let that = this
				if (!this.typeState1) {
					// console.log('点击去抽查', item)
					this.$emit('handleScroll') // 记录当前项目列表的位置
					uni.showModal({
						title: '发起抽查',
						content: `即将给执业员【${item.username}】发送抽查短信,请确认是否发起抽查?`,
						confirmColor: '#3178FF',
						cancelText: '取消',
						confirmText: '确认',
						success: function(res) {
							if (res.confirm) {
								that.$refs.loading.openLoading('加载中···'); // 打开loading动画
								that.$http.post({
									url: `/maintenanceRecordCheckSupervise/sponsorCheck/${item.id}`
								}).then(res => {
									// console.log('点击去抽查返回的结果', res)
									that.$refs.loading.closeLoading(); // 关闭loading动画
									if (res.code == 200) {
										that.$refs.uToast.show({
											title: res.msg,
											type: 'success'
										});
										setTimeout(() => {
											that.typeState1 = true
											that.typeState2 = false
											that.params.current = 1
											that.params.order = 1
											that.typeTimeTabTitle = '最新执业'
											that.params.checkStatus = null
											that.params.cancelStatus = null
											that.params.evidenceStatus = null
											that.getCheckPageList(); // 获取抽查列表or记录
										}, 500)
									} else {
										uni.showModal({
											title: '温馨提示',
											content: res.msg,
											confirmColor: '#3178FF',
											showCancel: false,
											confirmText: '确认',
											success: function(res) {
												if (res.confirm) {
													that.getCheckPageList(); // 获取抽查列表or记录
												}
											}
										})
									}
								})
							}
						},
					})
				}
				if (!this.typeState2) {
					// console.log('点击进入详情', item)
					this.$emit('handleScroll') // 记录当前项目列表的位置
					this.$pageJump.navigateTo('/pages/supervise/check/components/checkDetails?id=' + item.id)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.check {
		&-top {
			position: fixed;
			// top: 8.5%;
			width: 100%;
			z-index: 99;
			background-color: #F5F5F5;

			&-search {
				padding-bottom: 100rpx;
			}

			&-select {
				position: absolute;
				right: 5%;
				top: 27%;
				width: 210rpx;
				z-idnex: 99;
				border-left: 2rpx solid #cecdcd;
			}

			&-tabber {
				box-sizing: 4rpx 4rpx 4rpx red;
				margin: 0 3%;
				width: 100%;
				margin: 30rpx 0 -170rpx;
				overflow: hidden;

				/deep/.u-subsection {
					border-radius: 16rpx !important;
				}

				.activeTab {
					background-color: #F7F7F8;
					border-radius: 7rpx;
				}

				&-left {
					width: 47%;
				}

				&-right {
					width: 47%;
				}

				.ff-border-radius-10 {
					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 5rpx;
					}
				}
			}

			.refreshIcon {
				width: 35rpx;
				height: 30rpx;
			}
		}

		.activeTop1 {
			margin-top: 350rpx;
		}

		.activeTop2 {
			margin-top: 430rpx;
		}

		.left-icon {
			position: relative;
			top: -8rpx;
			left: 22%;
			width: 35rpx;
			height: 18rpx;
			z-index: 1;
		}

		.right-icon {
			position: relative;
			top: -8rpx;
			left: 73%;
			width: 35rpx;
			height: 18rpx;
			z-index: 1;
		}

		&-content {
			&-info {
				position: relative;
				z-index: 1;

				.ff-margin-20 {
					margin-top: 50rpx !important;
				}

				&-select {
					width: 210rpx;
				}
			}

			.check-but {
				position: absolute;
				right: 5%;
				top: 32%;
				background-color: #3178FF;
				color: #ffffff;
				font-size: 28rpx;
				padding: 23rpx 41rpx;
				border-radius: 14rpx;
			}

			.cancelIcon {
				position: absolute;
				right: 5%;
				top: 27%;
				width: 135rpx;
				height: 95rpx;
			}

			.lineIcon {
				position: absolute;
				left: -4%;
				top: 12%;
				width: 10rpx;
				height: 28rpx;
			}
		}


		.line {
			height: 60rpx;
			background-color: #F5F5F5;
		}

		.checkUnm {
			background-color: #EFF2F7;
			color: #A8A7B5;
			padding: 12rpx 15rpx;
			font-size: 24rpx;
			margin-left: 16rpx;
			border-radius: 5rpx;
		}

		.stateMore {
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
		}

		.stateList {
			.img1 {
				width: 120rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.img2 {
				width: 194rpx;
				height: 40rpx;
			}
		}
	}

	.checkState1 {
		position: relative;
		display: inline-block;
		background: linear-gradient(to right, #A6A6A6, #C4C4C4);
		line-height: 44rpx;
		padding: 2rpx 16rpx 2rpx 10px;
		color: #fff;
		text-align: center;
		font-size: 24rpx;
		border-radius: 9rpx;

		&::after {
			content: ' ';
			position: absolute;
			border-radius: 9rpx;
			top: 0;
			right: -8px;
			border-width: 42rpx 16rpx;
			border-style: solid;
			border-color: #C4C4C4 transparent transparent transparent;
		}
	}

	.checkState2 {
		position: relative;
		display: inline-block;
		background: linear-gradient(to right, #3379FF, #7FA9FC);
		line-height: 44rpx;
		padding: 2rpx 16rpx 2rpx 10px;
		color: #fff;
		text-align: center;
		font-size: 24rpx;
		border-radius: 9rpx;

		&::after {
			content: ' ';
			position: absolute;
			border-radius: 9rpx;
			top: 0;
			right: -8px;
			border-width: 42rpx 16rpx;
			border-style: solid;
			border-color: #7FA9FC transparent transparent transparent;
		}
	}

	.checkState3 {
		position: relative;
		display: inline-block;
		background: linear-gradient(to right, #0CC84B, #77E28A);
		line-height: 44rpx;
		padding: 2rpx 16rpx 2rpx 10px;
		color: #fff;
		text-align: center;
		font-size: 24rpx;
		border-radius: 9rpx;

		&::after {
			content: ' ';
			position: absolute;
			border-radius: 9rpx;
			top: 0;
			right: -8px;
			border-width: 42rpx 16rpx;
			border-style: solid;
			border-color: #77E28A transparent transparent transparent;
		}
	}

	.checkState4 {
		position: relative;
		display: inline-block;
		background: linear-gradient(to right, #EF322F, #FA7977);
		line-height: 44rpx;
		padding: 2rpx 16rpx 2rpx 10px;
		color: #fff;
		text-align: center;
		font-size: 24rpx;
		border-radius: 9rpx;

		&::after {
			content: ' ';
			position: absolute;
			border-radius: 9rpx;
			top: 0;
			right: -8px;
			border-width: 42rpx 16rpx;
			border-style: solid;
			border-color: #FA7977 transparent transparent transparent;
		}
	}

	.checkState4_3 {
		position: relative;
		display: inline-block;
		background: linear-gradient(to right, #EFF2F7, #EFF2F7);
		line-height: 44rpx;
		padding: 2rpx 16rpx 2rpx 10px;
		color: #7A7A7A;
		text-align: center;
		font-size: 24rpx;
		border-radius: 9rpx;

		&::after {
			content: ' ';
			position: absolute;
			border-radius: 9rpx;
			top: 0;
			right: -8px;
			border-width: 42rpx 16rpx;
			border-style: solid;
			border-color: #EFF2F7 transparent transparent transparent;
		}
	}

	.checkState4_2 {
		position: relative;
		display: inline-block;
		background: linear-gradient(to right, #EFF2F7, #EFF2F7);
		line-height: 44rpx;
		padding: 2rpx 16rpx 2rpx 10px;
		color: #10B680;
		text-align: center;
		font-size: 24rpx;
		border-radius: 9rpx;

		&::after {
			content: ' ';
			position: absolute;
			border-radius: 9rpx;
			top: 0;
			right: -8px;
			border-width: 42rpx 16rpx;
			border-style: solid;
			border-color: #EFF2F7 transparent transparent transparent;
		}
	}

	.checkState4_1 {
		position: relative;
		display: inline-block;
		background: linear-gradient(to right, #EFF2F7, #EFF2F7);
		line-height: 44rpx;
		padding: 2rpx 16rpx 2rpx 10px;
		color: #D61F1F;
		text-align: center;
		font-size: 24rpx;
		border-radius: 9rpx;

		&::after {
			content: ' ';
			position: absolute;
			border-radius: 9rpx;
			top: 0;
			right: -8px;
			border-width: 42rpx 16rpx;
			border-style: solid;
			border-color: #EFF2F7 transparent transparent transparent;
		}
	}
</style>